<template>
  <div class="myOrderDetail">
    <el-steps :payActive="payActive" finish-status="success">
      <el-step title="确认订单信息"></el-step>
      <el-step title="为订单付款"></el-step>
      <el-step title="获得您的宝贝"></el-step>
    </el-steps>
    <ShowContain class="sureOrder" v-if="payActive === 0" title="请确认您的订单信息">
      <div class="title">
        <p>宝贝</p>
        <p>宝贝类型</p>
        <p>价格</p>
        <p>vip优惠</p>
        <p>小计</p>
      </div>
      <div class="sureOrder-main" v-for="(item,index) in orderDetail" :key="index">
        <p class="shop">{{item.shopName}}</p>
        <div class="main" v-for="(good,index) in item.orderGood" :key="index">
          <p>
            <img :src="good.imgUrl" alt="">
            <span>{{good.goodName}}</span>
          </p>
          <p>{{good.goodType}}</p>
          <p>{{good.goodPrice}}</p>
          <p>暂无</p>
          <p>{{good.goodPrice}}</p>
        </div>
      </div>
      <div class="total">
        <div>
          <p><span class="des">实付款: </span><span class="money">¥{{total}}</span></p>
          <p><span class="des">买家: {{userInfo.user_name}}</span> <span>手机号: {{userInfo.user_phone}}</span></p>
        </div>
      </div>
      <div class="buttons">
        <el-button type="primary" @click="handleNext">已确认, 下一步付款</el-button>
      </div>
    </ShowContain>
    <ShowContain class="payOrder" v-else-if="payActive === 1" :title="`选择付款方式进行付款: ${total}元`">
      <div class="buttons">
        <el-button type="primary" @click="handlePay">付款</el-button>
      </div>
    </ShowContain>
    <ShowContain class="getOrder" v-else title="您已获得本商品">
      <div class="goMyinfo">
        商品已存入
        <!-- <router-link :to="{name: 'MyInfo',params: { select: '2-1' } }">>我的工作台</router-link> -->
      </div>
    </ShowContain>
  </div>
</template>

<script>
import ShowContain from '@/components/ShowContain';
import { mapActions, mapState, mapMutations } from 'vuex';
export default {
  name: '',
  components: {
    ShowContain
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      orderDetail: state => state.order.orderDetail,
      order_idList: state => state.order.order_idList,
      payActive: state => state.order.payActive
    }),
    good(){
      return this.$route.params.good;
    },
    total () {
      let total = 0;
      this.orderDetail.forEach(item => {
        item.orderGood.forEach(good => {
          total += good.goodPrice;
        });
      });
      return total;
    },
    cartOrderDetail(){
      return this.$route.params.orderDetail;
    }
  },
  data () {
    return {
    };
  },
  created(){
    this.changeActive(0);//每次都切换回0
    if(this.$route.params.whichPage === 'Detail'){
      this.fetchAddOneGoodsToOrder({ 
        payload: { user_id: this.userInfo.user_id, goods_id: this.good.goods_id },
        orderDetail: [{
          shopName: this.good.shop_name,
          shopId: this.good.sellerId,
          orderGood: [this.good]
        }],
      });
    }else if(this.$route.params.whichPage === 'Cart'){
      let orderDetail = [];
      this.cartOrderDetail.orderShop.forEach((shop,index) => {
        let goods_idList = []; //这次订单(这家店)的商品id
        let total_money = 0; //这次订单(这家店)的商品总价格
        let shopDetail = {
          shop_name: shop.shopName,
          sellerId: shop.shopId,
          orderGood: []
        };
        this.cartOrderDetail.orderGood.forEach(good => {
          if(good.shopId === shop.shopId){
            goods_idList.push(good.id);
            total_money += good.price;
            shopDetail.orderGood.push(good);
          }
        });
        orderDetail.push(shopDetail);
        this.fetchAddGoodsToOrderByShopId({
              user_id: this.userInfo.user_id, 
              shop_id: shop.shopId,
              goods_idList,
              total_money,
        });
      })
      this.saveOrderDetail(orderDetail);
    }
  },
  methods: {
    ...mapMutations(['saveOrderDetail','changeActive']),
    ...mapActions(['fetchAddOneGoodsToOrder', 'fetchAddGoodsToOrderByShopId','fetchPayForOrder','fetchPayForOrderById']),
    handleNext () {
      this.changeActive(1);
    },
    handlePay(){
      //两个付款的接口
      if(this.$route.params.whichPage === 'MyOrder'){
        //未付款的订单付款
        this.fetchPayForOrderById({
          user_id: this.userInfo.user_id,
          order_id: this.orderDetail[0].order_id,
          order_totalMoney: this.total,
          time: this.$moment().format('YYYY-MM-DD HH:mm:ss')
        });
      }else{
        //直接结算的付款 √
        this.fetchPayForOrder({ 
          user_id: this.userInfo.user_id,
          order_idList: this.order_idList,
          order_totalMoney: this.total
        })
      }
    }
  },
}
</script>
<style lang='scss' scoped src="./index.scss"/>
<style lang="scss" >
.myOrderDetail {
  .el-steps {
    width: 108%;
  }
}
</style>